/*头部*/
// banner
.banner{
  width: 100%;
  // height: 694px;
  padding: 12% 0 8%;
  background: url(../image/banner.jpg) no-repeat;
  background-size: cover;
  overflow: hidden;
  text-align: center;
  .title{
    font-size: 3rem;
    font-family: OSLight;
    color: #eee;
    margin-top: 15%;
    // margin-bottom: 20%;
    .bold{
      font-family: OSBold;
      color: #fcac45;
    }
  }
  .remark{
    font-size: 1.5rem;
    font-family: OSLight;
    color: white;
    margin-bottom: 20%;
    .bold{
      font-family: OSBold;
    }
  }
  .more{
    width: 52px;
    height: 52px;
    border-radius: 50%;
    margin: 5% auto;
    line-height: 52px;
    border: 1px solid #ccc;
    color: white;
    font-size: 1.5rem;
    transition: all ease-in-out .3s;
    &:hover{
      transform: translateY(-10px);
      box-shadow: 1px 0px 50px 2px #fff;
      // box-shadow: 0px 0px 10px 0px #ffffff;
    }
  }
  @media screen and (max-width:450px){
      .title{
          font-size:2.5em;
          margin-bottom:20px;
      }
  }
}

/*about*/
.about{
  width: 100%;
  padding: 8% 0 4%;
  .container{
    display: flex;
    .back{
      flex-shrink: 1;
      transition: all linear .3s;
    }
    .right{
      .title{
        .short{
          font-size: 1.8em;
          color: #999999;
          padding-bottom: 1%;
        }
        .long{
          font-size: 2em;
          text-transform: uppercase;
          color: #343434;
          padding-bottom: 4%;
          span{
            &:first-child{
              border-bottom: 4px solid #fcac46;
            }
            &:last-child{
              font-family: OSBold;
            }
          }
        }
      }
      p{
        font-family: OSLight;
        padding-bottom: 4%;
      }
      .list{
        padding-bottom: 6%;
        li{
          font-family: OSLight;
          padding-bottom: 2%;
          span{ 
            &:nth-child(2){
              font-family: OSBold;
              color: #343434;
            }
          }
        }  
      }
      .more{
        width: 60%;
        height: 3.5em;
        border: 1px solid #ccc;
        text-align: center;
        line-height: 3.5em;
        border-radius: 6px;
        span{
          &:nth-child(2){
            font-size: 1.5em;
            text-transform: uppercase;
            padding-left: 2%;
            font-family: OSLight;
            color: #8998a8;
            
          }
        }
        &:hover{
          transform: translateY(-5px);
          box-shadow: 0px 5px 10px 5px #ccc;
        }
      }
    }
  }
  // 媒体查询，浏览器窗口小于1210px时
  @media screen and (max-width:1200px){
    .container{
      .back{
          // flex-shrink: 0.5;
          display: none;
      } 
  }
}
  // 媒体查询  小于1000px
  @media screen and (max-width:1000px){
    .container{
      // flex-wrap: wrap;
      .back{
        // flex-shrink: .5;
        display: none;
      }
      display: block;
      .right{
        .title{
          padding: 1%;
          .long{
            padding-bottom: 1%;
          }
        }
        p{
          padding: 1%;
        }
        .list{
          padding-bottom: 1%;
          .li{
            padding-bottom: 2%;
          }
        }
        .more{
          width: 40%;
        }
      }
    }
  }
  // 小于800px
  @media screen and (max-width:800px){
    .container{
      padding-left: 2%;
    }
  }
  // 媒体查询，浏览器窗口小于750px时
  @media screen and (max-width:720px){
    .container{
      .back{
        display: none;
      }
      .right{
        .title{
          padding-bottom: 2%;
        }
        p{
          padding-bottom: 2%;
        }
        .more{
          width: 60%;
          font-size: 1em;
        }
      }
    }
  } 
  // 媒体查询 小于450px
  @media screen and (max-width:450px){
    .container{
      .right{
        .title{
          .short{
            font-size: 1.5em;
          }
          .long{
            font-size: 1.5em;
            padding-bottom: 2%;
          }
        }
        p{
          padding-bottom: 3%;
        }
        .list{
          li{
            // 禁止多行
            white-space: nowrap;
            // 溢出隐藏
            overflow: hidden;
            // 隐藏形式  以...
            text-overflow: ellipsis;
            
          }
        }
        .more{
          width: 60%;
          font-size: .6em;
        }
      }
    }
  }
}

// sort
.sort{
  width: 100%;
  background: #111111;
  padding: 3% 0 3%;
  .container{
    display: flex;
    // border: 1px solid red;
    flex-direction: column;
    align-items: center;
    .title{
      background: url(../image/title-bg_03.png) no-repeat center bottom;
      padding-bottom: 3%;
      margin-bottom: 5%;
      h3{
      font-size: 2em;
      text-transform: uppercase;
      font-family: OSLight;
      color: #fff;
      span{
        font-family: OSBold;
      }
      }
    }
    .box{
      width: 100%;
      // border: 1px solid red;
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      padding-bottom: 5%;
      .jason{
        width: 22%;
        display: flex;
        flex-direction: column;
        align-items: center;
        // border: 1px solid blue;
        .image{
          width: 8em;
          height: 8em;
          border-radius: 50%;
          // background-color: #ccc;
          img{
            width: 8em;
            height: 8em;
            border-radius: 50%;
          }
        }
        .content{
          font-size: 1em;
          color: #fff;
          text-align: center;
          .username{
            font-family: OSBold;
          }
          .nikename{
            font-family: OSLight;
            padding-bottom: 4%;
          }
          .more{
            font-family: OSLight;
          }
        }
      }
    }
    .dian{
      width: 3em;
      height: 3em;
      margin: 0 auto;
      label{
        width:.5em;
          height: .5em;
          background-color: #eee;
        &:hover{
          background-color: #fcac45;
        }
      }
    }
  }
  // 媒体查询  小于1000px
  @media screen and (max-width:1000px){
    .container{
      .box{
          // display: flex;
          flex-direction: column;
        .jason{
          width: 100%;
          // display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: flex-start;
          // margin: 0;
          margin-bottom: 2%;
          .image{
            img{
              height: 8em;
              width: 8em;
              border-radius: 0;
            }
          }
          .content{
            // display: flex;
            flex-direction: column;
            // align-items: flex-start;
            padding-left: 5%;
            text-align: left;
            // line-height: .5em;
          }
        }
      }
    }
  }
  // 小于450px
  @media screen and (max-width:450px){
   .container{
      .title{
        background-size: 40%;
        padding-bottom:8%;
        h3{
          font-size: 1.5em;
        }
      }
    }
  
  }
}

//look

.look{
  width: 100%;
  background: white;
  padding: 3% 0 3%;
  .container{
    text-align: center;
    .title{
      .long{
        text-transform: uppercase;
        background: url(../image/title-bg_03.png) no-repeat bottom center;
        padding-bottom: 5%;
        margin-bottom: 2%;
        font-size: 2em;
        font-family: OSLight;
        span{
          font-family: OSBold;
        }
      }
      .wenzi{
        font-size: 1em;
        // border: 1px solid red;
        font-family: OSLight;
        padding: 0 2% 8%;
        text-align: left;
      }
    }
    .list{
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .item{
        width: 20%;
        // border: 1px solid red;
        display: flex;
        flex-direction: column;
        align-items: center;
        .tux{
          width: 8em;
          height: 8em;
          border-radius: 50%;
          border: 4px solid #fcac46;
          margin-bottom: 5%;        
        }
        .content{
          // text-align: left;
          .uname{
            text-transform: uppercase;
            font-size: 1.5em;
            font-family: OSBold;
            padding-bottom: 8%;
          }
          .wenzi{
            font-size: 1em;
            // font-family: OSLight;
          }
        }
      }
    }
  }
  @media screen and (max-width:600px) {
    .container{
      .title{
        margin-bottom: 2%;
        .long{
          padding-bottom: 7%;
          font-size: 1.5em;
        }
        .wenzi{
          height: 5em;
          overflow-y: scroll;
        }
        
      }
      .list{
        flex-direction:column;
        .item{
          width: 100%;
          flex-direction: row;
          align-items: flex-start;
          padding-bottom: 0;
          .tux{
            margin-bottom: 5%;  
          }
          .content{
            .uname{
              font-size: 1.2em
            }
            .wenzi{
              font-size: .8emem;
              height: 4em;
              overflow-y: scroll;
            }
          }
          
        } 
      }
    }
  }
  

}


// some
.some{
  width: 100%;
  background: #111111;
  padding: 3% 0 3% ;
  .container{
    text-align: center;
    .title{
      background: url(../image/title-bg_03.png) no-repeat bottom center;
      font-size: 2em;
      padding-bottom: 5%;
      margin-bottom: 8%;
      color: white;
      text-transform: uppercase;
      .long{
        font-family: OSLight;
        span{
          font-family: OSBold;
        }
      }
    }
    .content{
      // text-align: center;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-evenly; 
      padding-bottom: 8%;    
    }
    .dian{
      label{
        width:.5em;
        height: .5em;
        background-color: #eee;
        &:hover{
          background-color: #fcac45;
        }
      }
    }
  }
  @media screen and (max-width:1000px){
    .container{
      .content{
        flex-wrap: wrap;
        align-content: space-around;
        img{
          margin-top: 10%;
        }
      }
    }
  }
  @media screen and (max-width:400px){
    .container{
      .content{
        flex-direction: column;
      }
    }
  }
}


// work
.work{
  width: 100%;
  padding: 3% 0 3%;
  .container{
    text-align: center;
    .title{
        text-transform: uppercase;
        background: url(../image/title-bg_03.png) no-repeat bottom center;
        padding-bottom: 5%;
        margin-bottom: 2%;
        font-size: 2em;
        font-family: OSLight;
        span{
          font-family: OSBold;
        }
      
    }
    .remork{
        font-size: 1em;
        // border: 1px solid red;
        font-family: OSLight;
        padding: 0 0 5%;
        text-align: center;
    }
    .box{
      width: 100%;
      // border: 1px solid red;
      .top{
        width: 100%;
        height: 2em;
        display: flex;
        justify-content: space-between;
        // border: 1px solid blue;
        line-height: 2em;
        margin-bottom: 2%;
        .left{
          text-transform: uppercase;
        }
        .right{
          font-size: 1em;
          width: 33%;
          // border: 1px solid red;
          // color: #999999;
          a{
            display: inline-block;
            border-right: 2px solid #999999;
            padding: 0 2%;
            color: rgb(116, 116, 116);
            &:last-child{
              border: 0;
              padding-left: 0;
            }
            &:hover{
              color: #000;
            }
          }
        }
        .select{
          display: none;
        }
      }
      .list{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .item{
          width: 23%;
          height: 12em;
          position: relative;
          overflow: hidden;
          margin-bottom: 2%;
          background: url(../image/work-img.png) no-repeat;
          
          .back{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 100%;
            left: 0;
            background: #010101;
            text-align: center;
            transition: all linear .3s;
            .trend{
              margin-top: 10%;
              // margin-bottom: 10%;
              .bold{
                text-transform: uppercase;
                font-family: OSBold;
                color: white;
                font-size: 1.3em;
              }
              .light{
                font-family: OSLight;
                color: #999999;
                font-size: .8em;
              }
            }
            .yuan{
              width: 2em;
              height: 2em;
              border-radius: 100px;
              margin: 10% auto;
              border: 2px solid #fcac45;
              // font-size: 1em;
              font-family: OSBold;
              color: #fcac45;
              line-height: 1.8em;
              text-align: center;
            }
          }
          &:hover .back{
            position: absolute;
            top: 0%;
            left: 0;
          }
        }
        .bg2{
          background: url(../image/work-img2.png) no-repeat;
        }
        .bg3{
          background: url(../image/work-img3.png) no-repeat;

        }
      }
    }
  }
  @media screen and (max-width:1200px){
    .container{
      .box{
        .top{
          .right{
            display: none;
          }
          .select{
            display: block;
          }
        }
      }
    }
  }
  @media screen and (max-width:700px){
    .container{
      .box{
        .list{
          .item{
            width: 32%;
            background-position: 50% 0;
          }
        }
      }
    }
  }
  @media screen and (max-width:500px){
    .container{
      .box{
        .list{
          .item{
            width: 48%;
          }
        }
      }
    }
  }
  @media screen and (max-width:400px){
    .container{
      .box{
        .list{
          // text-align: center;
          .item{
            width: 100%;
            .back{
              width: 76%;
            }
          }
        }
      }
    }
  }
}


// mork
.morl{
  width: 100%;
  background: #111111;
  padding: 3% 0 3%;
  .container{
    text-align: center;
    .title{
      background: url(../image/title-bg_03.png) no-repeat bottom center;
      font-size: 2em;
      padding-bottom: 5%;
      margin-bottom: 8%;
      color: white;
      text-transform: uppercase;
      .long{
        font-family: OSLight;
        span{
          font-family: OSBold;
        }
      }
    }
    .adress{
      text-transform: uppercase;
      color: #fff;
      padding-bottom: 10%;
    }
    .username{
      font-family: OSLight;
      color: #fff;
      padding-bottom: 5%;
    }
    .dian{
      label{
        width:.5em;
        height: .5em;
        background-color: #eee;
        &:hover{
          background-color: #fcac45;
        }
      }
    }
  }
  @media screen and (max-width:680px) {
    .container{
      .adress{
        font-size: .8em;
      }
    }
  }
  @media screen and (max-width:400px) {
    .container{
      .title{
        font-size: 1.5em;
        padding-bottom: 7%;
      }
      .adress{
        font-size: .6em;
      }
    }
  }
}

//CONTACT
.contact{
  width: 100%;
  padding: 3% 0 3%;
  background: white;
  .container{
    text-align: center;
    .title{
      background: url(../image/title-bg_03.png) no-repeat bottom center;
      font-size: 2em;
      padding-bottom: 5%;
      margin-bottom: 8%;
      color: black;
      text-transform: uppercase;
      .long{
        font-family: OSLight;
        span{
          font-family: OSBold;
        }
      }
    }
    .wenzi{
      color: #999999;
      font-size: .8em;
      padding-bottom: 8%;
    }
    .form{
      .ename{
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding-bottom: 3%;
        .name{
          width: 48%;
          h4{
            text-align: left;
            color: #999999;
            sup{
              color: red;
            }
          }
          input{
            width: 100%;
            height: 2em;
            border: 1px solid #999999;
            &:focus{
              box-shadow: 0px 5px 5px 5px #999999;
            }
          }
        }
        .address{
          width: 48%;
          h4{
            text-align: left;
            color: #999999;
            sup{
              color: red;
            }
          }
          input{
            width: 100%;
            height: 2em;
            border: 1px solid #999999;
            &:focus{
              box-shadow: 0px 5px 5px 5px #999999;
            }
          }
        }
      }
      .message{
        padding-bottom: 3%;
        h4{
          text-align: left;
          color: #999999;
          sup{
            color: red;
          }
        }
        .textarea{
          width: 100%;
          height: 8em;
          border: 1px solid #999999;
          line-height: 1em;
          &::placeholder{
            position: absolute;
            top: 0;
            left: 0;
          }
          &:focus{
            box-shadow: 0px 5px 5px 5px #999999;
          }
        }
        
      }
      .button{
        width:100%;
        text-align: right;
            .send{
                width:8em;
                height:2.5em;
                line-height: 2.5em;
                font-size:1.1em;
                text-align: center;
                border:0px;
                color:#fff;
                background:#fcac45;
                font-family: OSLight;
                transition: all linear .3s;

                &:hover{
                    transform:translateY(-10px);
                    box-shadow: 0px 10px 10px 1px #c5c5c5;
                }
            }
      }
    }
  }
  @media screen and(max-width:660px){
    .container{
      .form{
        .ename{
          flex-wrap: wrap;
          .name{
            width: 100%;
            padding-bottom: 2%;
          }
          .address{
            width: 100%;
          }
        }
        .button{
          text-align: center;
        }
      }
    }
  }
} 



// foot
.foot{
  width: 100%;
  padding: 3% 0 3%;
  background: #111111;
  
  .container{
    .box{
      display: flex;
      justify-content: space-between;
      align-items: center;
      // border: 1px solid red;
      .copy{
        color: #b2b2b2;
        font-size: .8em;
        // border: 1px solid red;
        height: 100%;
        // line-height: 2em;
      }
      .cate{
        // width: 18%;
        height: 2em;
        // border: 1px solid red;
        display: flex;
        justify-content: space-evenly;
      }
    }
  }
  @media screen and (max-width:550px){
    .container{
      .box{
        // flex-wrap: wrap;
        flex-direction: column;
        align-content: space-around;
        .copy{
          padding-bottom: 2%;
        }
        .cate{
          justify-content: space-around;
        }
      }
    }
  }
}